<template>
  <div class="inventory-plan">
    <el-form :model="formData" ref="form" :rules="rules" label-width="120px">
      <div class="form-section">
        <h3>盘点计划</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始日期" prop="startDate">
              <el-date-picker
                v-model="formData.startDate"
                type="date"
                placeholder="选择开始日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束日期" prop="endDate">
              <el-date-picker
                v-model="formData.endDate"
                type="date"
                placeholder="选择结束日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="盘点范围" prop="scope">
          <el-checkbox-group v-model="formData.scope">
            <el-checkbox label="office">办公设备</el-checkbox>
            <el-checkbox label="computer">电脑设备</el-checkbox>
            <el-checkbox label="furniture">办公家具</el-checkbox>
            <el-checkbox label="vehicle">车辆</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="盘点人员" prop="staff">
          <el-select v-model="formData.staff" multiple placeholder="请选择盘点人员">
            <el-option
              v-for="item in staffOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盘点说明" prop="description">
          <el-input
            type="textarea"
            v-model="formData.description"
            :rows="4"
            placeholder="请输入盘点计划说明">
          </el-input>
        </el-form-item>
      </div>

      <div class="form-actions">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">下一步</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'InventoryPlan',
  data() {
    return {
      formData: {
        startDate: '',
        endDate: '',
        scope: [],
        staff: [],
        description: ''
      },
      rules: {
        startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
        scope: [{ type: 'array', required: true, message: '请选择盘点范围', trigger: 'change' }],
        staff: [{ type: 'array', required: true, message: '请选择盘点人员', trigger: 'change' }]
      },
      staffOptions: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ]
    }
  },
  methods: {
    prevStep() {
      this.$emit('prev-step')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('next-step', this.formData)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inventory-plan {
  .form-section {
    margin-bottom: 30px;
    
    h3 {
      margin: 0 0 20px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  .form-actions {
    text-align: center;
    margin-top: 40px;
  }
}
</style> 